<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播客首页</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .podcast-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .podcast-card:hover {
      transform: translateY(-5px);
    }

    .gradient-bg {
      background: linear-gradient(135deg, #FF6B6B, #EF5777);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .rounded-image {
      border-radius: 12px;
    }

    .audio-player {
      background: white;
      border-radius: 24px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .progress-bar {
      height: 4px;
      background: #EFEFEF;
      border-radius: 2px;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #FF6B6B, #EF5777);
      border-radius: 2px;
      transition: width 0.3s ease;
    }
  </style>
</head>
<body>
  <header class="bg-white p-4 shadow-md flex justify-between items-center">
    <div class="flex items-center">
      
      <!-- https://via.placeholder.com/40x40?text=LOGO -->
      <img src="https://images.unsplash.com/photo-1726137065565-2c088892ee76?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="App Logo" class="w-10 h-10 rounded-full mr-4">
      <h1 class="text-xl font-bold">
        <!-- 小宇宙播客 -->
        心声漫读
      </h1>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
        <i class="fa fa-search"></i>
      </button>
      <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
        <i class="fa fa-bell"></i>
      </button>
    </div>
  </header>

  <main id="app2" class="p-4 space-y-6">
    <div class="flex justify-between items-center">
      <h2 class="text-lg font-bold gradient-bg">今日推荐</h2>
      <a href="#" class="text-sm text-gray-600 hover:text-gray-900">查看全部 ></a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <!-- {{ msg }} <ul><li v-for="item1 in tuiList2">{{ item1.id }}</li></ul> -->
      <div v-for="(item,index) in tuiList2" :key=index class="podcast-card">
        <!-- {{ item.id }} -->
        <img :src="item.picData" class="w-full h-60 rounded-image">
        <div class="p-4">
          <h3 class="text-lg font-bold">{{ item.title }}</h3>
          <p class="text-sm text-gray-600">{{ item.content }}</p>
          <div class="flex items-center justify-between mt-4">
            <div class="flex items-center space-x-2">
              <i class="fa fa-star text-yellow-500"></i>
              <span class="text-sm text-gray-600">
                播放数 {{ item.boFangNum }} - {{ item.dingYueNum}}订阅
              </span>
            </div>
            <button @click="gotoPlayPage(item.id)" class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 text-white rounded-full">播放</button>
          </div>
        </div>
      </div>
<!--      
      <div class="podcast-card">
        https://images.unsplash.com/photo-1615373344784-321d890000b3 
        <img src="https://images.unsplash.com/photo-1741526798351-50eeb46b2a06?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" alt="播客封面" class="w-full h-48 rounded-image">
        <div class="p-4">
          <h3 class="text-lg font-bold">科技早知道</h3>
          <p class="text-sm text-gray-600">每日科技新闻深度解读</p>
          <div class="flex items-center justify-between mt-4">
            <div class="flex items-center space-x-2">
              <i class="fas fa-star text-yellow-500"></i>
              <span class="text-sm text-gray-600">4.8 · 12万订阅</span>
            </div>
            <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 text-white rounded-full">播放</button>
          </div>
        </div>
      </div>

      <div class="podcast-card">
        https://images.unsplash.com/photo-1607720442477-81a3304142c3
        <img src="https://plus.unsplash.com/premium_photo-1686245735403-a01147d86b89?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="播客封面" class="w-full h-48 rounded-image">
        <div class="p-4">
          <h3 class="text-lg font-bold">商业洞察力</h3>
          <p class="text-sm text-gray-600">全球商业趋势与案例分析</p>
          <div class="flex items-center justify-between mt-4">
            <div class="flex items-center space-x-2">
              <i class="fas fa-star text-yellow-500"></i>
              <span class="text-sm text-gray-600">4.9 · 8万订阅</span>
            </div>
            <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 text-white rounded-full">播放</button>
          </div>
        </div>
      </div>
-->
    </div>

    <div id="fenlei1" class="mt-6">
      <h2 class="text-lg font-bold gradient-bg">热门分类</h2>
      <div class="flex items-center space-x-4 mt-4">
        <button onclick="showTab('keji')" class="px-4 py-2 bg-pink-100 rounded-full text-gray-600 hover:bg-gray-200">科技</button>
        <button onclick="showTab('shangye')" class="px-4 py-2 bg-gray-100 rounded-full text-gray-600 hover:bg-gray-200">商业</button>
        <button onclick="showTab('wenhua')" class="px-4 py-2 bg-gray-100 rounded-full text-gray-600 hover:bg-gray-200">文化</button>
        <button onclick="showTab('jiaoyu')" class="px-4 py-2 bg-gray-100 rounded-full text-gray-600 hover:bg-gray-200">教育</button>
      </div>
    </div>

    <div id="keji" class="audio-player"> 
      <div class="flex items-center space-x-4"> 
        <!-- https://images.unsplash.com/photo-1607720442477-81a3304142c3 -->
        <img src="https://plus.unsplash.com/premium_photo-1667428818562-fc8379f23bfe?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="播放封面" class="w-16 h-16 rounded-image">
        <div>
          <h3 class="text-sm font-bold">科技爆发，能超欧美吗？</h3>
          <p class="text-xs text-gray-600">第32期 · 11分钟</p>
        </div>
        <div class="flex-1">
          <div class="progress-bar mt-2">
            <div class="progress-fill" style="width: 35%"></div>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <i class="fa fa-step-backward text-lg text-gray-600"></i>
          <i class="fa fa-play-circle text-2xl text-pink-500"></i>
          <i class="fa fa-step-forward text-lg text-gray-600"></i>
        </div>
      </div>  
    </div>

    <div id="shangye" class="audio-player" style="display: none;"> 
      <div class="flex items-center space-x-4"> 
        <!-- https://images.unsplash.com/photo-1607720442477-81a3304142c3 -->
        <img src="https://images.unsplash.com/photo-1734945773941-1c3e6b340762" alt="播放封面" class="w-16 h-16 rounded-image">
        <div>
          <h3 class="text-sm font-bold">商业洞察力：创新商业模式</h3>
          <p class="text-xs text-gray-600">第34期 · 22分钟</p>
        </div>
        <div class="flex-1">
          <div class="progress-bar mt-2">
            <div class="progress-fill" style="width: 35%"></div>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <i class="fa fa-step-backward text-lg text-gray-600"></i>
          <i class="fa fa-play-circle text-2xl text-pink-500"></i>
          <i class="fa fa-step-forward text-lg text-gray-600"></i>
        </div>
      </div>  
    </div>

    <div id="wenhua" class="audio-player" style="display: none;"> 
      <div class="flex items-center space-x-4"> 
        <!-- https://images.unsplash.com/photo-1607720442477-81a3304142c3 -->
        <img src="https://images.unsplash.com/photo-1741509541813-b0a0ed98ca62" alt="播放封面" class="w-16 h-16 rounded-image">
        <div>
          <h3 class="text-sm font-bold">中国文化之乡是哪去吗？</h3>
          <p class="text-xs text-gray-600">第33期 · 44分钟</p>
        </div>
        <div class="flex-1">
          <div class="progress-bar mt-2">
            <div class="progress-fill" style="width: 35%"></div>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <i class="fa fa-step-backward text-lg text-gray-600"></i>
          <i class="fa fa-play-circle text-2xl text-pink-500"></i>
          <i class="fa fa-step-forward text-lg text-gray-600"></i>
        </div>
      </div>  
    </div>

    <div id="jiaoyu" class="audio-player" style="display: none;"> 
      <div class="flex items-center space-x-4"> 
        <!-- https://images.unsplash.com/photo-1607720442477-81a3304142c3 -->
        <img src="https://images.unsplash.com/photo-1735238075870-2e74333c6c7e" alt="播放封面" class="w-16 h-16 rounded-image">
        <div>
          <h3 class="text-sm font-bold">现在的教育是否可以从打牌开始</h3>
          <p class="text-xs text-gray-600">第31期 · 33分钟</p>
        </div>
        <div class="flex-1">
          <div class="progress-bar mt-2">
            <div class="progress-fill" style="width: 35%"></div>
          </div>
        </div>
        <!-- <i class="fa fa-camera-retro"></i> -->
        <div class="flex items-center space-x-4">
          <i class="fa fa-step-backward text-lg text-gray-600"></i>
          <i class="fa fa-play-circle text-3xl text-pink-500"></i>
          <i class="fa fa-step-forward text-lg text-gray-600"></i>
        </div>
      </div>  
    </div>

    <br>
    <br>
    <hr>
  </main>

  <!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
</body>
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
<script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
<script type="text/javascript">

  (()=>{
      console.log("home page start")
/**/
  })()


  function showTab(tabName) {
    console.log("tabName-=>",tabName)
    const tabs = ['keji', 'shangye', 'wenhua','jiaoyu'];
     tabs.forEach(tab => {
        document.getElementById(tab).style.display = 'none';
      });
      document.getElementById(tabName).style.display = 'grid';

      // 更新按钮状态
      const buttons = document.getElementsByClassName('bg-pink-100');
      Array.from(buttons).forEach(button => {
        button.classList.remove('bg-pink-100');//bg-gray-100
        button.classList.add('bg-gray-100');
      });
      document.querySelector(`[onclick="showTab('${tabName}')"]`).classList.add('bg-pink-100');
  }

  new Vue({
    el: '#app2',
    data(){
      return {
        msg:'abc',
        tuiList2:[],
        tuiList1:[
          {
            "id":1,
            "title":"科技早知道",
            "content":"每日科技新闻深度解读",
            "boFangNum":"312",
            "dingYueNum":23,
            "picData":"https://images.unsplash.com/photo-1741526798351-50eeb46b2a06"
          },
          {
            "id":2,
            "title":"商业洞察力",
            "content":"全球商业趋势与案例分析",
            "boFangNum":"320",
            "dingYueNum":20,
            "picData":"https://plus.unsplash.com/premium_photo-1667428818562-fc8379f23bfe"
          }
        ]
      }
    },
    created(){
      console.log("created()")

    },
    mounted(){
      console.log("mounted()")
      this.one();
    },
    methods:{
      one(){
        console.log("one()")

        var arr2 = [];

        var data1 = {'getTuiJ':'abc'}
        $.ajax({
          type:'GET',
          url:'test3.php',
          data:data1,
          success:function(res){
            // console.log("getTuiJ",res);
            var arr1 = JSON.parse(res);
            for(item1 of arr1){
              // console.log("item1-=>",item1)
              arr2.push(item1)
            }
            // console.log("arr1-=>",arr1)
            // console.log("arr2-=>",arr2)
          },
          timeout:2000,
          error:function(e){
            console.log(e);
          }
        })

        this.tuiList2 = arr2;
        // console.log("tuiList2-=>",this.tuiList2)
      },
      gotoPlayPage(e){
        console.log("gotoPlayPage()-=>",e);

        sessionStorage.setItem("playId",e);

        for(item2 of this.tuiList2){
          if(item2.id == e){
            sessionStorage.setItem("itemCont",JSON.stringify(item2));
            break;
          }
        }
        window.parent.changePage(2);

      }
    }
  })
</script>
</html>